<template>
  <div id="app">
    <!-- 内容区域：根据当前视图切换 -->
    <main>
      <!-- 首页内容 -->
      <div v-if="currentView === 'home'" class="home-content">
        <!-- 顶部搜索和分类（公共部分） -->
        <van-search
          v-model="searchValue"
          placeholder="请输入书名或者作者名"
          shape="round"
          background="#f2f2f2"
          left-icon="search"
          right-icon="scan"
          @confirm="handleSearch"
        >
          <template #action>
            <div class="category-btn">分类</div>
          </template>
        </van-search>

        <!-- 导航标签（公共部分） -->
        <van-tabs v-model:active="activeTab" color="#ee0a24">
          <van-tab title="推荐" />
          <van-tab title="小说" />
          <van-tab title="经典" />
          <van-tab title="知识" />
          <van-tab title="听书" />
          <van-tab title="短剧" />
          <van-tab title="视频" />
        </van-tabs>

        <!-- 推荐榜轮播图 -->
        <div class="recommend-banner">
          <h3 class="banner-title">推荐榜</h3>
          <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="(item, index) in recommendList" :key="index">
              <div class="swipe-item" @click="goToBookDetail(item)">
                <div class="book-cover-container">
                  <img :src="item.cover" alt="book cover" class="book-cover" />
                </div>
                <div class="book-info">
                  <p class="book-title">{{ item.title }}</p>
                  <p class="book-subtitle">{{ item.subtitle }}</p>
                </div>
              </div>
            </van-swipe-item>
          </van-swipe>
        </div>

        <!-- 分类区域 -->
        <div class="category-section">
          <h3 class="category-title">全部分类</h3>
          <van-grid :column-num="4" icon-size="32px" :border="false">
            <van-grid-item
              v-for="(category, index) in categories"
              :key="index"
              :icon="category.icon"
              :text="category.text"
              @click="selectCategory(category.text)"
            >
              <template #icon>
                <div class="category-icon">
                  <van-icon :name="category.icon" size="32px" color="#333" />
                </div>
              </template>
            </van-grid-item>
          </van-grid>
        </div>

        <!-- 底部内容 -->
        <div class="bottom-content">
          <div class="book-container">
            <div v-for="(row, rowIndex) in filteredBottomBooks" :key="rowIndex" class="book-row">
              <div v-for="(book, colIndex) in row" :key="colIndex" class="book-item" @click="goToBookDetailFromBottom(book)">
                <div class="book-cover-wrapper">
                  <img :src="book.cover" alt="book" class="book-cover"/>
                </div>
                <div class="book-details">
                  <p class="book-title">{{ book.title }}</p>
                  <p class="book-desc">{{ book.desc }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="isSearched && searchResults.length > 0">
        <div class="book-container">
          <div v-for="(book, index) in searchResults" :key="index" class="book-item" @click="goToBookDetail(book)">
            <div class="book-cover-wrapper">
              <img :src="book.cover" alt="book" class="book-cover"/>
            </div>
            <div class="book-details">
              <p class="book-title">{{ book.title }}</p>
              <p class="book-desc">{{ book.desc }}</p>
            </div>
          </div>
        </div>
      </div>
      <div v-else-if="isSearched && searchResults.length === 0">
        <p>没有上架该小说</p>
      </div>
      <!-- 小说详情页面内容 -->
      <div v-if="currentView === 'bookDetail'" class="book-detail-content">
        <!-- 详情页顶部导航 -->
        <div class="header">
          <div class="header-title">{{ currentBook.title }} - 详情</div>
          <div class="header-actions">
            <van-icon name="arrow-left" size="18px" @click="goBackToHome" />
          </div>
        </div>

        <!-- 小说封面和基本信息 -->
        <div class="book-info-section">
          <div class="book-cover-container">
            <img :src="currentBook.cover" alt="book cover" class="book-cover" />
          </div>
          <div class="book-basic-info">
            <p class="book-title">{{ currentBook.title }}</p>
            <p class="book-author">作者: {{ currentBook.author }}</p>
            <p class="book-status">状态: {{ currentBook.status }}</p>
            <p class="book-wordcount">字数: {{ currentBook.wordcount }}</p>
          </div>
        </div>

        <!-- 小说描述 -->
        <div class="book-desc-section">
          <h3 class="section-title">小说描述</h3>
          <p class="book-desc">{{ currentBook.desc }}</p>
        </div>

        <!-- 阅读按钮 -->
        <div class="read-button">
          <van-button type="primary" @click="startReading">开始阅读</van-button>
        </div>
      </div>
      <!-- 书库页面内容 -->
      <div v-if="currentView === 'library'" class="library-content">
        <!-- 书库顶部导航 -->
        <div class="header">
          <div class="header-title">至本小说 - 书库</div>
          <div class="header-actions">
            <van-icon name="search" size="18px" @click="showSearch = true" />
            <van-icon name="user" size="18px" @click="goToLogin" />
          </div>
        </div>

        <!-- 筛选条件 -->
        <div class="filter-container">
          <div class="filter-group">
            <div class="filter-title">读者:</div>
            <div class="filter-options">
              <div 
                v-for="(option, index) in readerFilters" 
                :key="index" 
                class="filter-option"
                :class="{ active: currentReader === option.value }"
                @click="currentReader = option.value"
              >
                {{ option.label }}
              </div>
            </div>
          </div>

          <div class="filter-group">
            <div class="filter-title">状态:</div>
            <div class="filter-options">
              <div 
                v-for="(option, index) in statusFilters" 
                :key="index" 
                class="filter-option"
                :class="{ active: currentStatus === option.value }"
                @click="currentStatus = option.value"
              >
                {{ option.label }}
              </div>
            </div>
          </div>

          <div class="filter-group">
            <div class="filter-title">字数:</div>
            <div class="filter-options">
              <div 
                v-for="(option, index) in wordCountFilters" 
                :key="index" 
                class="filter-option"
                :class="{ active: currentWordCount === option.value }"
                @click="currentWordCount = option.value"
              >
                {{ option.label }}
              </div>
            </div>
          </div>
        </div>

        <!-- 分类导航 -->
        <div class="category-nav">
          <div class="category-title">分类:</div>
          <div class="category-options">
            <div 
              v-for="(category, index) in libraryCategories" 
              :key="index" 
              class="category-option"
              :class="{ active: currentCategory === category.value }"
              @click="currentCategory = category.value"
            >
              {{ category.label }}
            </div>
          </div>
        </div>

        <!-- 排序选项 -->
        <div class="sort-options">
          <div 
            v-for="(sort, index) in sortMethods" 
            :key="index" 
            class="sort-option"
            :class="{ active: currentSort === sort.value }"
            @click="currentSort = sort.value"
          >
            {{ sort.label }}
          </div>
        </div>

        <!-- 书籍列表（模拟数据） -->
        <div class="book-list">
          <div 
            v-for="(book, index) in filteredBooks" 
            :key="index" 
            class="book-item"
            @click="goToBookDetail(book)"
          >
            <img :src="book.cover" alt="book cover" class="book-cover" />
            <div class="book-info">
              <div class="book-title">{{ book.title }}</div>
              <div class="book-meta">
                <span class="book-author">{{ book.author }}</span>
                <span class="book-status">{{ book.status }}</span>
                <span class="book-wordcount">{{ book.wordcount }}</span>
              </div>
              <div class="book-desc" v-if="book.desc">{{ book.desc }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 书架页面内容 -->
      <div v-if="currentView === 'bookshelf'" class="bookshelf-content">
        <!-- 书架顶部信息 -->
        <div class="bookshelf-header">
          <div class="reading-stats">
            <div class="time-stats">
              <span class="stat-value">{{ readingTime }}分钟</span>
              <span class="stat-label">累计听读</span>
            </div>
            <div class="tabs">
              <div 
                v-for="(tab, index) in bookshelfTabs" 
                :key="index" 
                class="tab"
                :class="{ active: currentBookshelfTab === index }"
                @click="currentBookshelfTab = index"
              >
                {{ tab }}
              </div>
            </div>
          </div>

          <div class="bookshelf-actions">
            <van-icon name="list" size="18px" @click="toggleViewMode" />
            <van-icon name="filter" size="18px" @click="openFilter" />
            <van-icon name="edit" size="18px" @click="enterEditMode" />
          </div>
        </div>

        <!-- 书架书籍列表 -->
        <div class="bookshelf-list">
          <!-- 历史记录 -->
          <div v-if="currentBookshelfTab === 0" class="history-list">
            <div v-for="(book, index) in historyBooks" :key="index" class="history-item">
              <img :src="book.cover" alt="book cover" class="history-cover" />
              <div class="history-info">
                <div class="history-title">{{ book.title }}</div>
                <div class="history-meta">
                  <span class="history-status">{{ book.status }}</span>
                  <span class="history-chapter">{{ book.chapter }}</span>
                </div>
                <div class="history-progress">
                  <div class="progress-bar" :style="{ width: book.progress + '%' }"></div>
                  <span class="progress-text">{{ book.progress }}%</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 追剧列表 -->
          <div v-if="currentBookshelfTab === 1" class="follow-list">
            <div v-for="(book, index) in followBooks" :key="index" class="follow-item">
              <img :src="book.cover" alt="book cover" class="follow-cover" />
              <div class="follow-info">
                <div class="follow-title">{{ book.title }}</div>
                <div class="follow-meta">
                  <span class="follow-status">{{ book.status }}</span>
                  <span class="follow-update">{{ book.update }}</span>
                </div>
                <div class="follow-chapter">{{ book.chapter }}</div>
              </div>
            </div>
          </div>

          <!-- 圈子功能 -->
          <div v-if="currentBookshelfTab === 2" class="circle-list">
            <div class="circle-header">
              <h3 class="circle-title">书友圈子</h3>
              <van-icon name="add" size="16px" @click="openCircle" />
            </div>
            <div class="circle-items">
              <div class="circle-item" v-for="(circle, index) in circles" :key="index">
                <div class="circle-cover">
                  <img :src="circle.cover" alt="circle" class="circle-img" />
                </div>
                <div class="circle-info">
                  <div class="circle-name">{{ circle.name }}</div>
                  <div class="circle-desc">{{ circle.desc }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 底部提示 -->
        <div class="bookshelf-footer">
          <div class="no-books" v-if="historyBooks.length === 0 && followBooks.length === 0">
            <van-icon name="book-o" size="48px" color="#999" />
            <p>暂无书籍，去<a @click="goToLibrary">书城</a>看看吧</p>
          </div>
          <div class="more-books" @click="loadMoreBooks">
            看更多书籍
          </div>
        </div>
      </div>

      <!-- 我的页面内容 -->
      <div v-if="currentView === 'mine'" class="mine-content">
        <!-- 我的页面头部 -->
        <div class="mine-header">
          <div class="login-area" @click="isLogin ? goToProfile() : goToLogin()">
            <div class="avatar" :class="{ 'logged-in': isLogin }">
              <van-icon v-if="!isLogin" name="user" size="48px" color="#999" />
              <img v-else src="https://picsum.photos/60/60?random=50" alt="avatar" class="avatar-img" />
            </div>
            <div class="login-info">
              <div class="login-text" v-if="!isLogin">点击登录/注册</div>
              <div class="user-info" v-else>
                <div class="username">用户名</div>
                <div class="user-level">LV.10 资深读者</div>
              </div>
            </div>
          </div>

          <div class="vip-area" @click="goToVip()">
            <div class="vip-badge">
              <span class="vip-text">开通会员</span>
              <span class="vip-price">¥2.00开通</span>
            </div>
          </div>
        </div>

        <!-- 我的资产 -->
        <div class="mine-assets">
          <div class="asset-item" @click="goToEarnCoins()">
            <div class="asset-value">{{ coins.value }}</div>
            <div class="asset-label">金币</div>
          </div>
          <div class="asset-item" @click="goToWithdraw()">
            <div class="asset-value">{{ balance.value }}<span class="unit">元</span></div>
            <div class="asset-label">余额</div>
          </div>
        </div>

        <!-- 功能菜单 -->
        <div class="mine-menu">
          <div class="menu-group">
            <div class="menu-item" @click="goToHistory()">
              <van-icon name="history" size="18px" color="#333" />
              <span>浏览历史</span>
              <van-icon name="arrow" size="14px" color="#999" />
            </div>
            <div class="menu-item" @click="goToContinueWatch()">
              <van-icon name="play" size="18px" color="#333" />
              <span>继续追剧</span>
              <van-icon name="arrow" size="14px" color="#999" />
            </div>
            <div class="menu-item" @click="goToMessages()">
              <van-icon name="message" size="18px" color="#333" />
              <span>我的消息</span>
              <van-icon name="arrow" size="14px" color="#999" />
            </div>
            <div class="menu-item" @click="goToAuthor()">
              <van-icon name="pen" size="18px" color="#333" />
              <span>成为作家</span>
              <van-icon name="arrow" size="14px" color="#999" />
            </div>
          </div>

          <div class="menu-group">
            <div class="menu-item" @click="goToSettings()">
              <van-icon name="setting" size="18px" color="#333" />
              <span>设置</span>
              <van-icon name="arrow" size="14px" color="#999" />
            </div>
            <div class="menu-item" @click="goToInvite()">
              <van-icon name="invite" size="18px" color="#333" />
              <span>邀请好友</span>
              <van-icon name="arrow" size="14px" color="#999" />
            </div>
            <div class="menu-item" @click="goToAbout()">
              <van-icon name="info" size="18px" color="#333" />
              <span>关于我们</span>
              <van-icon name="arrow" size="14px" color="#999" />
            </div>
          </div>
        </div>

        <!-- 短剧推荐 -->
        <div class="short-play-section">
          <div class="section-title">短剧</div>
          <div class="short-play-list">
            <div v-for="(play, index) in shortPlays" :key="index" class="short-play-item" @click="goToShortPlayDetail(play)">
              <img :src="play.cover" alt="short play" class="short-play-cover" />
              <div class="short-play-info">
                <div class="short-play-title">{{ play.title }}</div>
                <div class="short-play-meta">{{ play.playCount }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 底部导航 -->
        <div class="mine-footer">
          <div class="footer-link" @click="goToHelp()">
            帮助中心
          </div>
          <div class="copyright">
            © 2024 至本小说 版权所有
          </div>
        </div>
      </div>
    </main>

    <!-- 底部 TabBar -->
    <van-tabbar v-model:active="active" @change="handleTabChange">
      <van-tabbar-item name="book-city" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item name="library" icon="apps-o">书库</van-tabbar-item>
      <van-tabbar-item name="bookshelf" icon="bar-chart-o">书架</van-tabbar-item>
      <van-tabbar-item name="mine" icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';

// 当前视图状态（home/ library）
const currentView = ref('home');
const showSearch = ref(false);
const searchValue = ref('');

// 新增：当前查看的书籍
const currentBook = ref(null);

// 新增：返回首页方法
const goBackToHome = () => {
  currentView.value = 'home';
  active.value = 'book-city';
  isSearched.value = false; // 返回首页时重置搜索标记
  searchResults.value = []; // 清空搜索结果
};

// 新增：开始阅读方法
const startReading = () => {
  console.log('开始阅读:', currentBook.value.title);
  // 这里可以添加实际开始阅读的逻辑
};

// 修改：首页推荐榜轮播图添加点击事件
const goToBookDetail = (book) => {
  currentBook.value = book;
  currentView.value = 'bookDetail';
};

// 修改：首页底部书籍添加点击事件
const goToBookDetailFromBottom = (book) => {
  currentBook.value = book;
  currentView.value = 'bookDetail';
};

// 底部TabBar激活项
const active = ref('book-city');
const activeTab = ref(0);

// 首页数据
const recommendList = ref([
  { cover: 'https://picsum.photos/80?random=1', title: '咱家世代贼寇，你小子考上状元了', subtitle: '历史 · 7374万热度' },
  { cover: 'https://picsum.photos/80?random=2', title: '斩神：我契约的神都是SSS级', subtitle: '悬疑衍生 · 7328万...' },
  { cover: 'https://picsum.photos/80?random=3', title: '开局影帝系统你却让我参加跑男？', subtitle: '都市脑洞 · 7079万...' }
]);

const categories = ref([
  { icon: 'guide-o', text: '玄幻' },
  { icon: 'wap-home-o', text: '都市' },
  { icon: 'music-o', text: '历史' },
  { icon: 'question-o', text: '悬疑' },
  { icon: 'fire-o', text: '仙侠' },
  { icon: 'star-o', text: '科幻' },
  { icon: 'flower-o', text: '言情' },
  { icon: 'flag-o', text: '军事' }
]);

const bottomBooks = ref([
  [
    { cover: 'https://picsum.photos/100/140?random=10', title: '玄幻小说推荐', desc: '上古神话，热血修仙', category: '玄幻' },
    { cover: 'https://picsum.photos/100/140?random=11', title: '都市言情', desc: '现代都市，情感纠葛', category: '都市' }
  ],
  [
    { cover: 'https://picsum.photos/100/140?random=12', title: '历史传奇', desc: '穿越历史，改写命运', category: '历史' },
    { cover: 'https://picsum.photos/100/140?random=13', title: '悬疑推理', desc: '烧脑剧情，破解谜案', category: '悬疑' }
  ],
  [
    { cover: 'https://picsum.photos/100/140?random=14', title: '仙侠世界', desc: '御剑飞行，斩妖除魔', category: '仙侠' },
    { cover: 'https://picsum.photos/100/140?random=15', title: '科幻未来', desc: '星际探索，科技幻想', category: '科幻' }
  ]
]);

// 新增变量，记录当前选中的分类
const selectedCategory = ref('');

// 根据选中的分类过滤底部书籍
const filteredBottomBooks = computed(() => {
  if (selectedCategory.value === '') {
    return bottomBooks.value;
  }
  return bottomBooks.value.map(row => row.filter(book => book.category === selectedCategory.value)).filter(row => row.length > 0);
});

// 选择分类的方法
const selectCategory = (category) => {
  selectedCategory.value = category;
};

// 书库页面数据
const libraryCategories = ref([
  { value: 'all', label: '全部' },
  { value: 'male', label: '男生' },
  { value: 'female', label: '女生' },
  { value: 'fantasy', label: '玄幻' },
  { value: 'urban', label: '都市' },
  { value: 'history', label: '历史' }
]);

const readerFilters = ref([
  { value: 'all', label: '全部' },
  { value: 'male', label: '男生' },
  { value: 'female', label: '女生' }
]);

const statusFilters = ref([
  { value: 'all', label: '全部' },
  { value: 'completed', label: '已完结' },
  { value: 'updating', label: '连载中' }
]);

const wordCountFilters = ref([
  { value: 'all', label: '全部' },
  { value: 'less30w', label: '30万以下' },
  { value: '30-50w', label: '30-50万' },
  { value: '50-100w', label: '50-100万' },
  { value: '100-200w', label: '100-200万' },
  { value: 'more200w', label: '200万以上' }
]);

const sortMethods = ref([
  { value: 'newest', label: '最新' },
  { value: 'hottest', label: '最热' },
  { value: 'wordcount', label: '字数' }
]);

// 书库筛选状态
const currentCategory = ref('all');
const currentReader = ref('all');
const currentStatus = ref('all');
const currentWordCount = ref('all');
const currentSort = ref('hottest');

// 书库模拟数据（补充完整）
const booksData = ref([
  {
    id: 1, title: '我不是戏神', author: '三九音城', cover: 'https://picsum.photos/100/140?random=20',
    status: '连载中', wordcount: '288.6万字', desc: '赤色流星划过天际后，人类文明陷入停滞...',
    category: 'fantasy'
  },
  {
    id: 2, title: '十日终焉', author: '杀虫队队员', cover: 'https://picsum.photos/100/140?random=21',
    status: '已完结', wordcount: '296.4万字', desc: '不后富,不套路,不无敌,不系统...',
    category: 'mystery'
  },
  {
    id: 3, title: '我在精神病院学斩神', author: '三九音域', cover: 'https://picsum.photos/100/140?random=22',
    status: '已完结', wordcount: '426.4万字', desc: '你是否想过，在霓虹璀璨的都市下潜藏着怪物？',
    category: 'xianxia'
  },
  {
    id: 4, title: '海贼的巅峰！从罗杰团开始', author: '盗宝团长', cover: 'https://picsum.photos/100/140?random=23',
    status: '连载中', wordcount: '55.1万字', desc: '开局抵达拉夫德鲁，香克斯与巴基一生之敌...',
    category: 'male'
  },
  {
    id: 5, title: '诸神愚戏', author: '一月九十秋', cover: 'https://picsum.photos/100/140?random=24',
    status: '连载中', wordcount: '265.2万字', desc: '百年前，陈青源与源共赴九世红尘劫...',
    category: 'fantasy'
  },
  {
    id: 6, title: '我，圈钱主播！但大哥是真刷啊', author: '蓝色粉笔', cover: 'https://picsum.photos/100/140?random=25',
    status: '连载中', wordcount: '56.2万字', desc: '江枫穿越平行世界，觉醒直播圈钱系统...',
    category: 'urban'
  }
]);

// 筛选后的书籍列表（完整筛选逻辑）
const filteredBooks = computed(() => {
  return booksData.value.filter(book => {
    // 分类筛选
    const categoryMatch = currentCategory.value === 'all' || book.category === currentCategory.value;
    // 读者筛选（简化逻辑，实际可根据标签关联）
    const readerMatch = currentReader.value === 'all' || 
                        (currentReader.value === 'male' && book.category !== 'female') || 
                        (currentReader.value === 'female' && book.category === 'female');
    // 状态筛选
    const statusMatch = currentStatus.value === 'all' || book.status === currentStatus.value;
    // 字数筛选
    const wordcountMatch = currentWordCount.value === 'all' || 
                          (currentWordCount.value === 'less30w' && parseFloat(book.wordcount) < 30) ||
                          (currentWordCount.value === '30-50w' && parseFloat(book.wordcount) >= 30 && parseFloat(book.wordcount) < 50) ||
                          (currentWordCount.value === '50-100w' && parseFloat(book.wordcount) >= 50 && parseFloat(book.wordcount) < 100) ||
                          (currentWordCount.value === '100-200w' && parseFloat(book.wordcount) >= 100 && parseFloat(book.wordcount) < 200) ||
                          (currentWordCount.value === 'more200w' && parseFloat(book.wordcount) >= 200);
    
    return categoryMatch && readerMatch && statusMatch && wordcountMatch;
  }).sort((a, b) => {
    // 排序逻辑
    if (currentSort.value === 'newest') {
      // 模拟最新排序（假设id越大越新）
      return b.id - a.id;
    } else if (currentSort.value === 'hottest') {
      // 模拟最热排序（根据热度值或随机）
      return Math.random() - 0.5;
    } else if (currentSort.value === 'wordcount') {
      // 按字数排序
      return parseFloat(b.wordcount) - parseFloat(a.wordcount);
    }
    return 0;
  });
});

// 书架页面数据
const bookshelfTabs = ref(['书架', '历史', '追剧', '圈子']); // 书架标签
const currentBookshelfTab = ref(0); // 当前书架标签
const readingTime = ref(0); // 累计阅读时间
const viewMode = ref('list'); // 视图模式（列表/网格）
const isEditMode = ref(false); // 编辑模式
const showFilter = ref(false); // 显示筛选

// 历史书籍数据
const historyBooks = ref([
  {
    id: 1,
    title: '诡舍',
    author: '衣风旺',
    cover: 'https://picsum.photos/100/140?random=30',
    status: '完结',
    chapter: '88章/1020章',
    progress: 8,
  },
  {
    id: 2,
    title: '诡异复苏:和过去双排',
    author: '嘎嘎乱杀!',
    cover: 'https://picsum.photos/100/140?random=31',
    status: '完结',
    chapter: '15章未读',
    progress: 60,
  },
  {
    id: 3,
    title: '规则怪谈:诡异狗熊岭',
    author: '圪捕椒表成久',
    cover: 'https://picsum.photos/100/140?random=32',
    status: '9章/153章',
    chapter: '更新',
    progress: 10,
  },
  {
    id: 4,
    title: '阿斯达',
    author: '王嗄',
    cover: 'https://picsum.photos/100/140?random=36',
    status: '连载中',
    chapter: '20章/100章',
    progress: 20,
  },
  {
    id: 5,
    title: 'msdaoi2',
    author: 'gja',
    cover: 'https://picsum.photos/100/140?random=37',
    status: '已完结',
    chapter: '全本',
    progress: 100,
  },
]);

// 追剧列表数据
const followBooks = ref([
  {
    id: 4,
    title: '召唤最弱?抱歉我拥有逆天天财',
    author: '',
    cover: 'https://picsum.photos/100/140?random=33',
    status: '647章未读',
    update: '今天',
    chapter: '已读完',
  },
  {
    id: 5,
    title: '规则怪谈:室友的女友请小心你',
    author: '',
    cover: 'https://picsum.photos/100/140?random=34',
    status: '24章未读',
    update: '昨天',
    chapter: '去浏览历史',
  },
  {
    id: 6,
    title: '十日终焉',
    author: '',
    cover: 'https://picsum.photos/100/140?random=35',
    status: '读完',
    update: '3天前',
    chapter: '看更多书籍',
  },
  {
    id: 7,
    title: 'O苏古典风格',
    author: '刘璇军',
    cover: 'https://picsum.photos/100/140?random=38',
    status: '100章未读',
    update: '今天',
    chapter: '继续阅读',
  },
  {
    id: 8,
    title: '风中奇男子',
    author: '张江杨',
    cover: 'https://picsum.photos/100/140?random=39',
    status: '50章未读',
    update: '昨天',
    chapter: '追更中',
  },
]);

// 书友圈子数据
const circles = ref([
  {
    id: 1,
    name: '悬疑推理爱好者',
    desc: '一起讨论悬疑推理小说',
    cover: 'https://picsum.photos/60/60?random=100',
  },
  {
    id: 2,
    name: '玄幻修仙联盟',
    desc: '分享玄幻修仙小说',
    cover: 'https://picsum.photos/60/60?random=101',
  },
]);

// 书架操作函数
const toggleViewMode = () => {
  viewMode.value = viewMode.value === 'list' ? 'grid' : 'list';
};

const openFilter = () => {
  showFilter.value = !showFilter.value;
};

const enterEditMode = () => {
  isEditMode.value = !isEditMode.value;
};

const goToLibrary = () => {
  currentView.value = 'library';
  active.value = 'library';
};

const loadMoreBooks = () => {
  // 加载更多书籍逻辑
  console.log('加载更多书籍');
};

const openCircle = () => {
  // 打开圈子逻辑
  console.log('打开圈子');
};

// 我的页面数据
const myPageTabs = ref(['我的', '会员', '商城']); // 我的页面标签
const currentMyTab = ref(0); // 当前我的页面标签
const isLogin = ref(false); // 登录状态（正确声明为ref）
const coins = ref(0); // 金币数量
const balance = ref(0.00); // 余额
const historyPlay = ref('龙鳞破境 看到第49集'); // 历史播放
const shortPlays = ref([
  {
    id: 1,
    title: '和阿姨谈心后我开启了攻略系统',
    playCount: '236.6万播放',
    cover: 'https://picsum.photos/100/140?random=40',
  },
  {
    id: 2,
    title: '年下弟弟他又宠又撩',
    playCount: '短剧热门',
    cover: 'https://picsum.photos/100/140?random=41',
  },
]);

// 我的页面操作函数
const goToLogin_page = () => {
  console.log('前往登录页面');
  // 模拟登录逻辑（正确使用ref的value属性）
  isLogin.value = true;
};

const goToProfile = () => {
  console.log('前往个人资料页面');
};

const goToVip = () => {
  console.log('前往会员开通页面');
};

const goToEarnCoins = () => {
  console.log('前往领金币页面');
};

const goToWithdraw = () => {
  console.log('前往提现页面');
};

const goToHistory = () => {
  console.log('前往浏览历史页面');
};

const goToContinueWatch = () => {
  console.log('前往继续追剧页面');
};

const goToMessages = () => {
  console.log('前往我的消息页面');
};

const goToAuthor = () => {
  console.log('前往成为作家页面');
};

const goToSettings = () => {
  console.log('前往设置页面');
};

const goToInvite = () => {
  console.log('前往邀请好友页面');
};

const goToAbout = () => {
  console.log('前往关于我们页面');
};

const goToHelp = () => {
  console.log('前往帮助中心页面');
};

const goToShortPlayDetail = (play) => {
  console.log('前往短剧详情页:', play.title);
};

// 底部TabBar点击事件

const handleTabChange = (tab) => {
  active.value = tab;
  if (tab === 'library') {
    currentView.value = 'library';
  } else if (tab === 'bookshelf') {
    currentView.value = 'bookshelf';
  } else if (tab === 'mine') {
    currentView.value = 'mine';
  } else {
    currentView.value = 'home';
  }
};

// 搜索相关
const isSearched = ref(false); // 新增：记录是否进行了搜索
const searchResults = ref([]); // 新增：存储搜索结果

const handleSearch = () => {
  isSearched.value = true;
  const keyword = searchValue.value.trim().toLowerCase(); // 转换为小写进行匹配
  console.log('搜索关键词:', keyword);
  if (keyword === '') {
    searchResults.value = [];
    return;
  }
  const allBooks = [...bottomBooks.value.flat(), ...booksData.value];
  searchResults.value = allBooks.filter(book => {
    const title = typeof book.title === 'string' ? book.title.trim().toLowerCase() : '';
    return title.includes(keyword);
  });
  console.log('搜索结果:', searchResults.value);
};
const goToLogin = () => {
  console.log('前往登录页面');
  // 实际项目中可以跳转到登录页
};


</script>

<style scoped>
/* 公共样式 */
#app {
  min-height: 100vh;
  background-image: linear-gradient(to bottom,#ada996,#f2f2f2,#dbdbdb,#eaeaea);
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  padding-bottom: 50px; /* 预留底部TabBar空间 */
}

/* 首页样式 */
/* 首页样式优化 */
.home-content {
  padding: 0 15px;
}

.recommend-banner,
.category-section,
.bottom-content {
  margin-bottom: 15px;
}

.banner-title,
.category-title {
  font-size: 18px;
  font-weight: 600;
  padding: 12px 0;
}

.swipe-item {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.book-cover-container {
  width: 80px;
  height: 110px;
  margin-right: 15px;
  flex-shrink: 0;
}

.book-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.book-info {
  flex: 1;
}

.book-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 5px;
  line-height: 1.3;
  color: #333;
}

.book-subtitle {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}

.category-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.book-row {
  display: flex;
  margin-bottom: 15px;
}

.book-item {
  flex: 1;
  margin-right: 15px;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.book-item:last-child {
  margin-right: 0;
}

.book-cover-wrapper {
  height: 130px;
}

.book-details {
  padding: 10px;
}

.book-desc {
  font-size: 13px;
  color: #666;
  margin-top: 5px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 书库页面样式 */
.library-content {
  padding: 10px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 10px;
}

.header-title {
  font-size: 16px;
  font-weight: bold;
}

.header-actions {
  display: flex;
  gap: 15px;
}

.search-bar {
  padding: 0 10px;
  margin-bottom: 10px;
}

.filter-container,
.category-nav,
.sort-options {
  background-color: #fff;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.filter-group {
  margin-bottom: 10px;
}

.filter-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  color: #333;
}

.filter-options,
.category-options,
.sort-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-option,
.category-option,
.sort-option {
  padding: 10px 15px; /* 增加触摸区域 */
  border-radius: 15px;
  background-color: #f5f5f5;
  font-size: 12px;
  cursor: pointer;
}

.filter-option.active,
.category-option.active,
.sort-option.active {
  background-color: #ee0a24;
  color: #fff;
}

.book-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.book-list .book-item {
  display: flex;
  padding: 10px;
  margin-right: 0;
}

.book-list .book-cover {
  width: 70px;
  height: 96px;
}

.book-list .book-info {
  padding-left: 10px;
}

.book-list .book-title {
  font-size: 14px;
}

.book-list .book-meta {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}

.book-list .book-desc {
  margin-top: 8px;
  line-height: 1.5;
}

/* 书架页面样式 */
.bookshelf-content {
  padding: 10px;
}

.bookshelf-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-radius: 8px;
  padding: 12px 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 10px;
}

.reading-stats {
  display: flex;
  align-items: center;
  gap: 20px;
}

.time-stats {
  display: flex;
  align-items: baseline;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
  color: #ee0a24;
}

.stat-label {
  font-size: 12px;
  color: #666;
  margin-left: 4px;
}

.tabs {
  display: flex;
  gap: 10px;
}

.tab {
  padding: 10px 15px; /* 增加触摸区域 */
  font-size: 12px;
  border-radius: 12px;
  background-color: #f5f5f5;
  cursor: pointer;
}

.tab.active {
  background-color: #ee0a24;
  color: #fff;
}

.bookshelf-actions {
  display: flex;
  gap: 15px;
}

.bookshelf-list {
  gap: 10px;
}

.history-list,
.follow-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.history-item,
.follow-item {
  display: flex;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  padding: 10px;
}

.history-cover,
.follow-cover {
  width: 70px;
  height: 96px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 10px;
}

.history-info,
.follow-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.history-title,
.follow-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-meta,
.follow-meta {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: #666;
}

.history-progress {
  display: flex;
  align-items: center;
  margin-top: 5px;
}

.progress-bar {
  flex: 1;
  height: 4px;
  background-color: #f0f0f0;
  border-radius: 2px;
  overflow: hidden;
  margin-right: 5px;
}

.progress-bar::after {
  content: '';
  display: block;
  height: 100%;
  background-color: #ee0a24;
}

.progress-text {
  font-size: 12px;
  color: #666;
  white-space: nowrap;
}

.circle-list {
  background-color: #fff;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.circle-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.circle-title {
  font-size: 16px;
  font-weight: bold;
}

.circle-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.circle-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 calc(50% - 5px); /* 两列布局 */
}

.circle-cover {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
}

.circle-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.circle-info {
  flex: 1;
}

.circle-name {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
}

.circle-desc {
  font-size: 12px;
  color: #666;
}

.bookshelf-footer {
  text-align: center;
  padding: 20px 0;
  font-size: 14px;
}

.no-books {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #999;
}

.no-books a {
  color: #ee0a24;
  text-decoration: underline;
}

.more-books {
  padding: 10px 15px; /* 增加触摸区域 */
  background-color: #f5f5f5;
  border-radius: 20px;
}
/* 我的页面样式 */
.mine-content {
  padding: 10px;
  background-color: #f5f5f5;
}

.mine-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 10px;
}

.login-area {
  display: flex;
  align-items: center;
  gap: 15px;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.logged-in {
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.login-info {
  flex: 1;
}

.login-text {
  font-size: 14px;
  color: #333;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.username {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 2px;
}

.user-level {
  font-size: 12px;
  color: #999;
}

.vip-area {
  background-color: #fff8e6;
  border-radius: 20px;
  padding: 6px 12px;
}

.vip-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.vip-text {
  color: #ee0a24;
}

.vip-price {
  color: #ff9800;
  font-size: 10px;
}

.mine-assets {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  border-radius: 8px;
  padding: 15px 0;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.asset-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.asset-value {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.unit {
  font-size: 12px;
  font-weight: normal;
}

.asset-label {
  font-size: 12px;
  color: #666;
}

.mine-menu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-bottom: 10px;
}

.menu-group {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px; /* 增加触摸区域 */
  font-size: 14px;
  color: #333;
  border-bottom: 1px solid #f5f5f5;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item:active {
  background-color: #f5f5f5;
}

.short-play-section {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.short-play-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.short-play-item {
  min-width: 120px;
  flex-shrink: 0;
}

.short-play-cover {
  width: 100%;
  height: 68px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 6px;
}

.short-play-info {
  font-size: 12px;
}

.short-play-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.short-play-meta {
  color: #999;
  font-size: 10px;
}

.mine-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  font-size: 12px;
  color: #999;
}

.footer-link {
  padding: 10px 15px; /* 增加触摸区域 */
  margin-bottom: 10px;
  cursor: pointer;
}

.copyright {
  margin-top: 10px;
}

/* 小说详情页面样式 */
.book-detail-content {
  padding: 10px;
}

.book-detail-content .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 10px;
}

.book-detail-content .header-title {
  font-size: 16px;
  font-weight: bold;
}

.book-detail-content .header-actions {
  display: flex;
  gap: 15px;
}

.book-info-section {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 15px;
}

.book-info-section .book-cover-container {
  width: 80px;
  height: 110px;
  margin-right: 15px;
  flex-shrink: 0;
}

.book-info-section .book-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.book-info-section .book-basic-info {
  flex: 1;
}

.book-info-section .book-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 5px;
  line-height: 1.3;
  color: #333;
}

.book-info-section .book-author,
.book-info-section .book-status,
.book-info-section .book-wordcount {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
  margin-bottom: 3px;
}

.book-desc-section {
  background-color: #fff;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 15px;
}

.book-desc-section .section-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}

.book-desc-section .book-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}

.read-button {
  text-align: center;
}

/* 底部TabBar样式 */
.van-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

/* 媒体查询，适配小屏幕设备 */
@media (max-width: 320px) {
  .book-cover {
    width: 60px;
    height: 82px;
  }

  .book-title {
    font-size: 14px;
  }

  .book-subtitle {
    font-size: 10px;
  }

  /* 其他需要调整的样式 */
}

/* 媒体查询，适配大屏幕设备 */
@media (min-width: 768px) {
  /* 可以根据需要调整一些样式 */
  .home-content,
  .library-content,
  .bookshelf-content,
  .mine-content {
    padding: 0 20px;
  }
}
</style>